<template>
  <div class="foot_main">
    <a-card :loading="loading" title="硒都美食">
      <a-menu
        v-model:selectedKeys="current"
        mode="horizontal"
        style="width: 100%; height: 3em"
        @click="footMeaageList"
      >
        <a-menu-item v-for="item in footAddList" :key="item.id">
          {{ item.addressName }}
        </a-menu-item>
      </a-menu>
      <div class="card_message">
        <a-card
          hoverable
          style="width: 30em;display:inline-block;margin:0 10px"
          v-for="(item,index) in message_card"
          :key="index"
        >
          <template #cover>
            <img
              alt="example"
              :src="item.imageUrl"
            />
          </template>
          <a-card-meta :title="item.name">
            <template #description>
							{{item.description}}
						</template>
          </a-card-meta>
        </a-card>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted } from "vue";
import { footAddress, footList } from "@/utils/fetch/api";
export default defineComponent({
  components: {},
  setup() {
    const loading = ref<Boolean>(false);

    const current = ref<number[]>([1]);

    const footAddList = ref<any>([]);
    const footMessage = ref<any>([]);

    const refresh = async () => {
      loading.value = true;
      try {
        const data = await footAddress();
        footAddList.value = data.data;

        const params = {
          pageNum: 1,
        };
        const datas = await footList(params);
        footMessage.value = datas.data.data;
      } catch (error) {
        console.error(error);
      }
      footMeaageList({key:1});
      loading.value = false;
    };

    const message_card = ref<any>([]);

    const footMeaageList = async (item: any) => {
			const keyNum = item.key
      let addName: any;
      message_card.value = [];
      footAddList.value.forEach((items: any) => {
        if (items.id == keyNum) {
          addName = items.addressName;
          return;
        }
      });
      if (addName == undefined) {
        return;
      } else {
        footMessage.value.forEach((items: any) => {
          if (items.foodAddress == addName) {
            message_card.value.push(items);
          }
        });
      }
    };
    onMounted(() => {
      refresh();
    });
    return {
      loading,
      current,
      footAddList,
      footMeaageList,
      message_card,
    };
  },
});
</script>

<style lang="less" scoped>
.foot_main {
  width: 100%;
  height: 100%;
  background: white;
  /deep/.ant-menu-title-content {
    font-size: 1.5em;
  }
  .card_message {
		margin-top: 20px;
    min-height: 30em;
		.ant-card {
      float: left;
    }
    .ant-card::after {
      content: "";
      clear: both;
    }
  }
}
/deep/.ant-card {
  .ant-card-head-title {
    font-size: 3em;
  }
}

</style>
